<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="ststic/js/vue.js"></script>
    <script src="ststic/js/jquery.js"></script>
    <title>Title</title>
    <style>

        .active {
            background-color: brown;
        }

        #app {
            width: 300px;
            height: 400px;
            border: 1px solid #333333;
            margin: 100px auto;
        }

        .all {
            margin: 0 auto;
            position: relative;
        }

        .secend {
            margin-left: 30px;
            margin-top: 20px;
        }


    </style>
</head>
<body>

<div id="app">

    <table class="all">
        <thead>
        <tr>
            <td>产品号</td>
            <td>品牌</td>
            <td>价格</td>
            <td>产品名</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in students">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.brand}}</td>
        </tr>
        </tbody>
    </table>
    <div>
        <div v-if="true" class="secend">
            <button v-for="item in studentCount" :class="{active:item==numpage}" @click="showPage(item)">{{item}}
            </button>


        </div>
    </div>


</div>


<script>
    let vm = new Vue({
        el: "#app",
        data: {
            students: [],
            studentCount: 0,
            pagecount: 10,
            numpage: 1,
        },
        methods: {
            showPage(page) {
                this.numpage = page;
                this.getData();
            },
            getData() {
                $.ajax('/studentpage', {
                    data: {
                        pagecount: this.pagecount,
                        numpage: this.numpage
                    },
                    success: data => {
                        this.students = data.items;
                        this.studentCount = Math.ceil(data.sumcount / this.pagecount);
                    }
                })
            },

        },
        created() {
            this.getData();
        }

    })

</script>

</body>
</html>